<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义表单</title>
		<style type="text/css">
			* {
				box-sizing: border-box;
			}

			body {
				font-family: PingFangSC-Regular, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
			}

			#root {
				height: 100%;
				overflow: auto;
				height: calc(100% - 64px);
				min-height: 800px;
			}

			.form-design {
				position: relative;
				height: 100%;
				width: 100%;
				overflow: hidden;
				background-color: #eff0f1;
				margin: 0px;
				padding: 0px;
			}

			.form-design-left {
				position: absolute;
				left: 0px;
				top: 0px;
				bottom: 0px;
				z-index: 1;
				width: 360px;
				height: 880px;
				background-color: #fff;
			}

			.form-design-middle {
				width: 100%;
				height: 100%;
			}

			.form-design-right {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				z-index: 1;
			}

			.form-design-middle-inner {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				position: relative;
				height: 800px;
			}

			.phone-wrapper {
				height: 100%;
				padding: 12px 12px 28px;
				box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, .16), inset 0 -1px 1px 0 #c9cbd5, inset -1px 0 4px 0 rgba(57, 63, 89, .09);
				border: 1px solid #eee;
				border-radius: 24px;
				background-color: #fff;
				height: 580px;
				width: 320px;
			}

			.phone-wrapper-screen {
				height: 100%;
				max-width: 300px;
				border-radius: 16px;
				border: 1px solid rgba(0, 0, 0, .1);
				background-color: #f4f5f6;
				z-index: 1;
			}
			.phone-wrapper-screen:hover{
				/* border:1px solid #3370ff; */
			}
			.field-list {
				height: 100%;
				border-radius: 16px;
				background-color: #f5f6f7;
				font-size: 14px;
			}

			.field-list-header {
				font-family: PingFang SC, Microsoft YaHei;
				font-size: 14px;
				margin-bottom: 4px;
				width: 100%;
				height: 42px;
				padding: 0 1em;
				border-top-left-radius: 16px;
				border-top-right-radius: 16px;
				line-height: 42px;
				text-align: center;
				font-weight: 500;
				color: #1f2329;
				background-color: #fff;
				box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.widget-item-template{
				width: 150px;
				margin: 5px;
				float: left;
				/* position: absolute; */
			}
			
			.widget-type-item {
			    display: flex;
			    align-items: center;
			    padding: 5px 3px 5px 7px;
			    border: 1px solid #e4e5e7;
			    border-radius: 4px;
			    cursor: -webkit-grab;
			    cursor: grab;
			    position: relative;
			}
			.widget-type-item:hover {
			    border: 1px solid #3370ff;
			    -webkit-transform: translate(0);
			    transform: translate(0);
			    background: #fff;
			    box-shadow: 0 4px 8px rgba(31, 35, 41, .03), 0 3px 6px -6px rgba(31, 35, 41, .05), 0 6px 18px 6px rgba(31, 35, 41, .03);
			}
			
			.widget{
				width: 100%;
				padding: 10px;
				background-color: #FFFFFF;
				margin-top: 8px;
				cursor: pointer;
				border: 1px solid #FFFFFF;
				position: relative;
			}
			.widget:hover{
				border: 1px solid rgba(51,112,255,.5);
			}
			
			.field-item-operationBar{
				position: absolute;
				right: 0px;
				top: -24px;
				display: none;
				justify-content: flex-end;
				align-items: center;
				height: 24px;
				padding: 4px;
				border-radius: 4px 4px 0 0;
				color: #fff;
				background-color: #336df4;
				font-size: 12px;
			}
			
			.field-item-operationBar .copy-btn{
				height: 24px;
				line-height: 24px;
				padding-left: 5px;
				padding-right: 5px;
			}
			
			
			.field-item-operationBar .del-btn:hover{
				border-radius: 6px;
				background-color: rgba(31, 35, 41, .2);
			}
			.field-item-operationBar .copy-btn:hover{
				border-radius: 6px;
				background-color: rgba(31, 35, 41, .2);
			}
			.field-item-operationBar .del-btn{
				height: 24px;
				line-height: 24px;
				padding-left: 5px;
				padding-right: 5px;
			}
			
		</style>
	</head>
	<body>
		<div id="root">
			<div class="form-design">
				<div class="form-design-left">
					
					<div class="widget-item-template" onclick="addFormWidget('text')">
						<div class="widget-type-item">
							<div class="widget-type-item-name">文本</div>
						</div>
					</div>
					
					<div class="widget-item-template" onclick="addFormWidget('number')">
						<div class="widget-type-item">
							<div class="widget-type-item-name">数字</div>
						</div>
					</div>
					
					<div class="widget-item-template" onclick="addFormWidget('select')">
						<div class="widget-type-item">
							<div class="widget-type-item-name">下拉选项</div>
						</div>
					</div>
					
					<div class="widget-item-template" onclick="addFormWidget('select')">
						<div class="widget-type-item">
							<div class="widget-type-item-name">长文本</div>
						</div>
					</div>
					<div style="clear: both;"></div>
				</div>
				<div class="form-design-middle">
					<div class="form-design-middle-inner">
						<!-- 手机模型 -->
						<div class="phone-wrapper">
							<div class="phone-wrapper-screen">
								<div class="field-list" id="fieldList">
									<div class="field-list-header">收款单</div>
								</div>
							</div>
						</div>
					</div>

				</div>
				<div class="form-design-right">

				</div>
			</div>
		</div>
	</body>
</html>
<script src="common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// function mousedownHandler(e){
	// 	console.log("元素被按下")
	// }
	
	// function onmousemoveHandler(event){
	// 	// 鼠标滑动的距离 = 鼠标移动后的位置 - 按下鼠标时的位置
	// 	var distanceX = event.pageX - mouseX;
	// 	var distanceY = event.pageY - mouseY;
	// 	console.log(distanceX,distanceY)
	// }
	
	// let widgetItemTemplate= document.querySelector(".widget-item-template");
	// widgetItemTemplate.onmousedown=function(e){
	// 	window.widget = e;
	// 	// 获取按下鼠标时 盒子与页面的距离
	// 	var originBoxX = widgetItemTemplate.offsetLeft;
	// 	var originBoxY = widgetItemTemplate.offsetTop;
	// 	// 获取按下鼠标时 鼠标与页面的距离
	// 	var mouseX = event.pageX;
	// 	var mouseY = event.pageY;
	// 	//创建一个新的元素进行移动
		
	// 	let moveWidget = div('widget-item-template',div('widget-type-item',div('widget-type-item-name','数字')))
	// 	moveWidget.style.left = mouseX;
	// 	moveWidget.style.top = mouseY;
	// 	moveWidget.style.zIndex = 2;
	// 	document.body.appendChild(moveWidget);
	// 	// 在页面上移动，监听移动事件
	// 	window.onmousemove = function (){
	// 		// 鼠标滑动的距离 = 鼠标移动后的位置 - 按下鼠标时的位置
	// 		var distanceX = event.pageX - mouseX;
	// 		var distanceY = event.pageY - mouseY;
			
	// 		// 给元素重新赋值 上左定位的位置
	// 		widgetItemTemplate.style.left = originBoxX + distanceX + "px";
	// 		widgetItemTemplate.style.top = originBoxY + distanceY + "px";
	// 	}
		
	// 	// 鼠标松开取消事件
	// 	widgetItemTemplate.onmouseup = function (e){
	// 		// 解绑在页面上滚动的事件
	// 		console.log("鼠标松开")
	// 		//moveWidget.parentNode.removeChild(moveWidget)
	// 		window.onmousemove = null;
	// 		console.log(e)
			
	// 	}
	// }
	
	class Field{
		constructor(arg) {
		    this.element = document.createElement("div");
			this.element.setAttribute("class","widget");
			//操作按钮组
			this.operationBar = document.createElement("div");
			this.operationBar.setAttribute("class","field-item-operationBar");
			//复制按钮
			this.copyBtn = document.createElement("div");
			this.copyBtn.setAttribute("class","copy-btn");
			this.copyBtn.innerText="复制";
			this.operationBar.appendChild(this.copyBtn)
			//间隔符号
			this.space = document.createElement("div");
			this.space.innerText="|";
			this.operationBar.appendChild(this.space)
			//删除按钮
			this.delBtn = document.createElement("div");
			this.delBtn.setAttribute("class","del-btn");
			this.delBtn.innerText="删除";
			this.delBtn.addEventListener("click",(e)=>{
				this.element.parentNode.removeChild(this.element)
			})
			this.operationBar.appendChild(this.delBtn)
			//安装按钮组
			this.element.appendChild(this.operationBar)
			
			//控件内容
			this.element.appendChild(this.createLabel())
			this.element.appendChild(this.createFormItem());
			
			//初始化事件
			this.element.addEventListener("click",(e)=>{
				this.operationBar.style.display="flex"
			})
		}
		createLabel(){
			let label= document.createElement("label");
			label.innerText = "文本";
			return label;
		}
		createFormItem(){
			let input = document.createElement("input")
			input.setAttribute("type","text")
			return input;
		}
		
		getElement(){
			return this.element;
		}
	}
	
	class FieldNumber extends Field{
		constructor(arg) {
		    super(arg)
		}
		createLabel(){
			let label= document.createElement("label");
			label.innerText = "数值";
			return label;
		}
		createFormItem(){
			let input = document.createElement("input")
			input.setAttribute("type","number")
			return input;
		}
		
		getElement(){
			return this.element;
		}
	}
	
	class FieldText extends Field{
		constructor(arg) {
		    super(arg)
		}
		createLabel(){
			let label= document.createElement("label");
			label.innerText = "文本";
			return label;
		}
		createFormItem(){
			let input = document.createElement("input")
			input.setAttribute("type","text")
			return input;
		}
		
		getElement(){
			return this.element;
		}
	}
	
	class FieldSelect extends Field{
		constructor(arg) {
		    super(arg)
		}
		createLabel(){
			let label= document.createElement("label");
			label.innerText = "下拉选项";
			return label;
		}
		createFormItem(){
			let select = document.createElement("select")
			let option = document.createElement("option");
			option.innerText="选项一"
			let option2 = document.createElement("option");
			option2.innerText="选项二"
			let option3 = document.createElement("option");
			option3.innerText="选项三"
			select.appendChild(option)
			select.appendChild(option2)
			select.appendChild(option3)
			return select;
		}
		
		getElement(){
			return this.element;
		}
	}
	
	var formContainer = document.getElementById("fieldList");
	
	// var widgetItemTemplate = document.querySelectorAll("widget-item-template");
	// widgetItemTemplate.addEventListener("click",(e)=>{
	// 	formContainer.appendChild(new FieldNumber().getElement())
	// })
	
	function addFormWidget(type){
		switch (type){
			case "text":
				formContainer.appendChild(new FieldText().getElement())
				break;
			case "number":
				formContainer.appendChild(new FieldNumber().getElement())
				break;
			case "select":
				formContainer.appendChild(new FieldSelect().getElement())
				break;
		}
	}
	
	// var formContainer = document.getElementById("fieldList");
	// formContainer.addEventListener("mouseenter",(e)=>{
	// 	console.log("鼠标悬浮")
	// })
</script>